<template>
 <div  >
    <div class="search">
        <Date-picker type="month" placeholder="选择月" style="width: 200px"
                     :options="options" :value="currentDate" @on-change="dateChange"></Date-picker>
        <i-button type="primary" @click="switchMonth">搜索</i-button>
    </div>
     <Table :columns="columns" :data="tableData" border   ></Table>
 </div>
</template>

<script>
import { findList } from '@/api/outbreak-management/dataStatistics'
export default {
  name: 'dataStatistics',
  data () {
    return {
      // 时间框禁用
      options: {
        disabledDate (date) {
          return date && date.valueOf() > Date.now() - 86400000
        }
      },
      // 当前日期
      currentDate: '',
      // 固定列
      fixedColumns: [
        {
          title: '名称',
          key: 'name',
          fixed: 'left',
          width: 140
        }
      ],
      // 列
      columns: [],
      // 表格
      tableData: []
    }
  },
  methods: {
    // 改变日期
    dateChange (date) {
      this.currentDate = date
    },
    // 切换月份
    switchMonth () {
      this.getColumns()
      this.tableData = []
      this.getDataStatistics()
    },
    // 获取表格列
    getColumns () {
      let currentDate = this.currentDate
      let day = this.$common.xeUtils.getDayOfMonth(currentDate)
      let date = this.$common.moment(currentDate).format('YYYY-MM')
      this.columns = this.fixedColumns.slice()
      for (let item = 1; item <= day; item++) {
        this.columns.push({
          title: `${item}日`,
          key: `${date}-${item < 10 ? '0' + item : item}`,
          minWidth: 80,
          align: 'center'
        })
      }
    },
    // 获取表格数据
    getDataStatistics () {
      let currentDate = this.$common.moment(this.currentDate).format('YYYY-MM')
      findList({ input_date: currentDate }).then(({ data }) => {
        let { errcode, data: res } = data
        if (errcode === 0) {
          res.forEach((item) => {
            let data = {
              name: item.name,
              service_name: item.service_name,
              url: item.url
            }
            if (item.details.length !== 0) {
              item.details.forEach((i) => {
                let result = i.result
                switch (result) {
                  case 'draft':
                    data[i.report_date] = '未提报'
                    break
                  case 'commit' :
                    data[i.report_date] = '部门'
                    break
                  case 'audited':
                    data[i.report_date] = '分项'
                    break
                  case 'leader_audited':
                    data[i.report_date] = '大区'
                    break
                }
                // data[i.report_date] = '√'
              })
            }
            this.tableData.push(data)
          })
        } else {
          this.$Message.warning('获取信息失败!')
        }
      })
    },
    // 初始化获取当前系统时间
    getCurrentDate () {
      let date = this.$common.xeUtils.now()
      this.currentDate = this.$common.moment(date).format('YYYY-MM')
      this.switchMonth()
    }
  },
  mounted () {
    this.getCurrentDate()
  }
}
</script>

<style scoped lang="less">
    .search{
        margin: 10px 0 20px 0 ;
        padding: 10px ;
        display: flex;
        justify-content: space-between;
        box-shadow: 1px 1px 2px 2px #ededed;
        border-radius: 5px
    }
</style>
